<template>
  <h1>Child</h1>
  <p>{{ num }}</p>
  <button @click="$emit('setNum')">按钮</button>
  <button @click="handleClick">按钮</button>
</template>

<script lang="ts">
export default {
  name: "Child",
  // 在js使用props数据
  setup(props, context) {
    /*
      props prop数据
      context 一个对象
        emit
        attrs
    */
    console.log(props.num);

    console.log(context);

    const handleClick = () => {
      context.emit("setNum");
    };

    return {
      handleClick,
    };
  },
  // 声明接受之后，就可以在模板页面中使用
  props: {
    num: {
      type: Number,
      required: true,
    },
  },
  emits: ["setNum"],
};
</script>
